<template>
  <a-modal
    v-model:open="chooseCoupon"
    width="800px"
    title="选择优惠券"
    :maskClosable="false"
    @ok="affirm"
  >
    <div style="display: flex; justify-content: end; margin-bottom: 6px">
      <a-input-search
        allowClear
        v-model:value="pageSet.name"
        placeholder="请输入优惠券名称"
        enter-button
        @search="loadPagination(true)"
        style="width: 300px"
      />
    </div>
    <a-table
      style="margin-top: 15px"
      size="small"
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      bordered
      :pagination="false"
      row-key="id"
      :preserveSelectedRowKeys="true"
      :row-selection="{
        selectedRowKeys: selectedRowKeysList,
        onChange: onSelectChange,
        preserveSelectedRowKeys: true,
        type: 'radio'
      }"
      :scroll="{x: 700, y: 500}"
    ></a-table>
    <Pagination
      :pageSet="pageSet"
      style="margin-top: 10px"
      :loadPagination="loadPagination"
    ></Pagination>
  </a-modal>
</template>

<script lang="ts" setup>
import {ref, computed} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import {queryDiscount} from "@/api/discount/discountList";
import dayjs from "dayjs";
import {message} from "ant-design-vue";
const tableData = ref<Array<any>>([]);
const tableLoading = ref<boolean>(false);
const dateFormat = "YYYY-MM-DD";
const chooseCoupon = ref(false);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  status: 1,
  endTime: dayjs().format("YYYY-MM-DD")
});
const columns = ref<Array<object>>([
  {
    title: "优惠券名称",
    dataIndex: "name",
    align: "center",
    width: 200
  },
  {
    title: "折扣比例%",
    dataIndex: "discount",
    align: "center",
    width: 120
  },
  {
    title: "最低消费",
    dataIndex: "minConsumption",
    align: "center",
    width: 100
  },
  {
    title: "类型",
    dataIndex: "type",
    align: "center",
    width: 120,
    customRender: ({value}) => {
      if (value == 1) {
        return "折扣";
      } else {
        return "其他";
      }
    }
  },
  {
    title: "优惠券开始使用时间",
    dataIndex: "startDate",
    align: "center",
    width: 150,
    customRender: ({value, record}) => {
      if (record.endDate !== null && record.startDateDate !== null) {
        return dayjs(value).format("YYYY-MM-DD");
      } else {
        return "";
      }
    }
  },
  {
    title: "优惠券使用结束时间",
    dataIndex: "endDate",
    align: "center",
    width: 150,
    customRender: ({value, record}) => {
      if (record.endDate !== null && record.startDateDate !== null) {
        return dayjs(value).format("YYYY-MM-DD");
      } else {
        return "";
      }
    }
  },
  {
    title: "优惠券有效期",
    dataIndex: "date",
    align: "center",
    width: 120,
    customRender: ({value, record}) => {
      if (record.endDate !== null && record.startDateDate !== null) {
        const endDate = dayjs(record.endDate, dateFormat);
        const startDate = dayjs(record.startDate, dateFormat);
        value = endDate.diff(startDate, "day");
        return value + "天";
      }
    }
  },
  {
    title: "发放人员",
    dataIndex: "sendScope",
    align: "center",
    width: 200,
    customRender: ({value}) => {
      if (value == 1) {
        return "全平台";
      }
      if (value == 2) {
        return "指定商品";
      } else {
        return "其他";
      }
    }
  }
]);
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;

  queryDiscount(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
const emits = defineEmits(["ok"]);
//选中优惠券数据
const couponIdData = ref<any>({});
const selectedRowKeysList = ref();
function onSelectChange(selectedRowKeys, e) {
  couponIdData.value = {
    name: e[0].name,
    couponId: e[0].id,
    endDate: e[0].endDate,
    sendScope: e[0].sendScope
  };
  selectedRowKeysList.value = selectedRowKeys;
}
const showModal = (data) => {
  if (data.couponId) {
    couponIdData.value = data;
    selectedRowKeysList.value = [data.couponId];
  } else {
    couponIdData.value = {};
    selectedRowKeysList.value = [];
  }
  pageSet.value.name = "";
  loadPagination(true);
};
const affirm = () => {
  if (selectedRowKeysList.value.length) {
    emits("ok", couponIdData.value);
  } else {
    message.error("请选择优惠券");
  }
};
defineExpose({
  chooseCoupon,
  showModal
});
</script>

<style lang="less" scoped></style>
